/**
 * @author truexin
 * @date   16/10/21
 */

(function (lf, r) {
    var RC = r.createClass,
        doAction = lf.bridgeJs.doAction;
    
    var setChoose = [
        {
            addClass: 'margin-top',
            text: '健康数据',
            url: 'finger-healthy-data.html',
        },
        {
            addClass: 'margin-top',
            text: '设备状态',
            url: 'finger-dev-state.html',
        },
        {
            addClass: 'margin-top',
            text: '医生建议',
            url: 'report-consult.html?flag=finger&suggest=doctor',
        },
        {
            addClass: 'margin-top',
            text: '亲情关怀',
            url: 'report-consult.html?flag=finger&suggest=relative',
        },
        {
            addClass: 'margin-top',
            text: '我的授权',
            url: 'finger-gave-recipient.html',
            title: 'noTitle',
        }
    ];
    
    var LinkBox = RC({
        clickFn: function () {
            var info = this.props.info,
                url = info.url,
                title = info.text,
                notitle = info.title;

            if(notitle){
                doAction(url, title ,notitle);
            }else{
                doAction(url, title );
            }
        },

        componentDidMount: function () {
            r.findDOMNode(this.refs.list).addEventListener('tap', function () {
                this.clickFn();
            }.bind(this))
        },

        render: function () {
            let info = this.props.info;
            return (
                <li className={"mui-table-view-cell " + (info.addClass  || '')} ref="list">
                    <a href="javascript:;" className="mui-navigate-right">
                        <span className="text">{info.text}</span>
                    </a>
                </li>
            )
        }
    });

    var Body = RC({
        render: function () {
            var link = setChoose.map(info => {
                return (
                    <LinkBox info={info}/>
                )
            });
            return (
                <div className="my-index">
                    <ul className="mui-table-view mui-table-view-chevron choose-link">
                        {link}
                    </ul>
                </div>
            );
        }
    });

    lf.appJs.getUser(function () {
        r.render(
            <Body />,
            document.getElementById('root'),
            function () {
                $('#root').css('background-color', '#ededed');
            }
        )
    });

    
})(liefeng, React)